<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>某个订单的详细信息</title>
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=KLQBZ-LR6CD-3U64B-PN3P3-ZFGT6-LFFJU"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            width: 80%;
            height: 70%;
        }
    </style>
</head>
<body>

任务号：<input type="text" id="usage_id" name="usage_id" value="${usage_id}">
<button id="btn">提交查询位置</button>

<div id="container"></div>

<script type="text/javascript">
    let center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    let map = new TMap.Map("container", {
        zoom: 15,
        center: center
    });

    console.log(123);//√
    $(function () {
        $("#btn").click(function () {
            $.post({
                url:"${pageContext.request.contextPath}/login/location",
                data:{"usage_id":$("#usage_id").val()},
                success:function (data) {
                    console.log(data);
                    let obj = JSON.parse(data);
                    console.log(obj);
                    console.log(obj[0].lat);

                    let path = [
                        //起始
                        new TMap.LatLng(obj[0].lon, obj[0].lat),
                        //现在
                        new TMap.LatLng(obj[2].lon, obj[2].lat),
                        //终止
                        new TMap.LatLng(obj[1].lon, obj[1].lat)
                    ];

                    let polylineLayer = new TMap.MultiPolyline({
                        map, // 绘制到目标地图
                        // 折线样式定义
                        styles: {
                            'style_blue': new TMap.PolylineStyle({
                                'color': '#3777FF', //线填充色
                                'width': 4, //折线宽度
                                'borderWidth': 2, //边线宽度
                                'borderColor': '#FFF', //边线颜色
                                'lineCap': 'round' //线端头方式
                            })
                        },
                        geometries: [{
                            styleId: 'style_blue',
                            paths: path
                        }],
                    });

                    let marker = new TMap.MultiMarker({
                        map,
                        styles: {
                            'car-down': new TMap.MarkerStyle({
                                'width': 40,
                                'height': 40,
                                'anchor': {
                                    x: 20,
                                    y: 20,
                                },
                                'faceTo': 'map',
                                'rotate': 180,
                                'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
                            }),
                            "start": new TMap.MarkerStyle({
                                "width": 25,
                                "height": 35,
                                "anchor": { x: 16, y: 32 },
                                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
                            }),
                            "end": new TMap.MarkerStyle({
                                "width": 25,
                                "height": 35,
                                "anchor": { x: 16, y: 32 },
                                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
                            })
                        },
                        geometries: [{
                            id: 'car',
                            styleId: 'car-down',
                            position: new TMap.LatLng(obj[0].lon, obj[0].lat),
                        },{
                            "id": 'start',
                            "styleId": 'start',
                            "position": new TMap.LatLng(obj[0].lon, obj[0].lat)
                        }, {
                            "id": 'end',
                            "styleId": 'end',
                            "position": new TMap.LatLng(obj[1].lon, obj[1].lat)
                        }]
                    });
                    marker.moveAlong({
                        'car': {
                            path,
                            speed: 250
                        }
                    }, {
                        autoRotation:true
                    })
                }
            })

        })

    });


</script>
</body>
</html>
